
<div id="my-header">
	<div class="my-module">
		<img src="images/project.png" alt="project" width="60" height="60">
		<a href="javascript:getMenu('project')">Project</a>
	</div>
	<div class="my-module">
		<img src="images/handshake.png" width="60" height="60"> <a
			href="javascript:getMenu('hr')">HR</a>
	</div>
	<div class="my-module">
		<img src="images/reports.png" width="60" height="60"> <a
			href="#">CAS</a>
	</div>
	<div class="my-module">
		<img src="images/money_bag.png" width="60" height="60"> <a
			href="#">PB</a>
	</div>
	<div class="my-module">
		<img src="images/519644-145_Action-128.png" width="60" height="60">
		<a href="LoginDisplayServlet">Logout</a>
	</div>
	<div class="clearer"></div>
	<ul style="display: none;" id="project">
		<li><a href="ProjectDisplayServlet">Add New Project</a></li>
		<li><a href="ProjectDisplayServlet?pId=2">Update Exsisting
				Project</a></li>
	</ul>
	<ul style="display: none;" id="hr">
		<li><a href="DepartmentAddDisplay">Add New Department</a></li>
		<li><a href="DepartmentUpdateDisplay">Update Exsisting
				Department</a></li>
		<li><a href="EmployeeDisplay">Add New Employee</a></li>
		<li><a href="EmployeeDisplay">Update Exsisting Employee</a></li>
	</ul>
</div>
<script>
	//$("div ul").hide();
	function getMenu(menuId) {
		$("#my-header ul").hide();
		$("#" + menuId).show();
	}
</script>
